<template>
  <div id="app">
    <transition name="fade">
      <div class="loading" v-if="!loaded"></div>
    </transition>
    <wantNumber></wantNumber>
  </div>
</template>

<script>
import wantNumber from "./components/wantNumber.vue";
import store from './store.js'

export default {
  name: "app",
  components: {
    wantNumber
  },
  computed: {
    loaded: {
      get () {
        return store.state.loaded
      },
      set () { }
    }
  }
};
</script>
<style lang="stylus">
@import './assets/styles/clear.css'
@import './assets/styles/index.styl'
#app {
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align left
  color #2c3e50
}
input::-webkit-input-placeholder {
  color c7
}
.loading {
  position fixed
  z-index 999
  top 0
  bottom 0
  left 0
  right 0
  background #fff
  background-image url('./assets/images/loading_2.gif')
  background-position center
  background-repeat no-repeat
  background-size 36px
}
// distpicker style
.distpicker-address-wrapper {
  margin-bottom 30px
  .address-header {
    ul {
      li {
        color c5 !important
        border-bottom-color c4 !important
      }
    }
  }
  .address-container {
    ul {
      li {
        color c5 !important
        opacity 0.8
      }
    }
  }
}
.fade-enter-active, .fade-leave-active {
  transition opacity 0.5s
}
.fade-enter, .fade-leave-to { /* .fade-leave-active below version 2.1.8 */
  opacity 0
}
</style>
